<style lang="scss" scoped>
    .main{width: 100%;height:100%;background: url('http://jhsy-img.caizhu.com/sass/images/bg.png') no-repeat top left;background-size: 100% 100%;padding: 50px 0px;}
    .main-content{width: 1511px;height: 816px;overflow: hidden;margin: 0 auto;}
    .content-img{float: left;width: 1031px; height: 100%;background: url('http://jhsy-img.caizhu.com/sass/images/main-bg.png') no-repeat 0 0;}
    .ct-logo{
        width: 100%;
        height: 50%;
        text-align: left;
        padding: 60px 0 0 60px;
        box-sizing:border-box
    }
    .ct-logo .iconfont {
        font-size:68px;
        color:#fff;
        line-height:1;

    }
    .ct-des{width: 100%;height: 50%;position: relative;}
    .ct-des-in{position: absolute;right:60px;bottom: 85px;}
    .ct-des-in p{text-align: right;}
    .ct-des-up{font-size: 48px;color:#fff;line-height: 78px;}
    .ct-des-down{font-size: 30px;color:#fff;line-height: 78px;}

    .content-login{float: right;width: 480px;height: 100%;background: #fff;position: relative;}
    .switch-btn{float: right;cursor: pointer;position: absolute;top:5px ;right: 5px;}
    .switch-btn-img{width: 50px;height:50px;}


    .notic-box{
        position: absolute;top: 26px; right: 35px;
    }

    .poptip{width: 80px;
       position:relative;
        padding: 5px 10px;
        background: #fff;
        border: 1px solid #3f66f6;
        height: 16px;
        text-align: center;line-height: 26px;z-index: 9999;}
    .poptip2{width: 80px;
        position: absolute;
        padding: 5px 10px;
        background: #fff;
        border: 1px solid #3f66f6;
        height: 16px;
        top: 27px;
        right: 48px;text-align: center;line-height: 26px;}
    .poptip-arrow{top: 8px;right: 0;position: absolute;z-index: 10;line-height: 16px;}
    .poptip-arrow em{    top: 0;left: 1px; border-left-color: #3f66f6; border-width: 6px 0 6px 6px;    position: absolute;
        width: 0;
        height: 0;
        border-color: rgba(255,255,255,0);    border-style: solid;
        overflow: hidden;font-style: normal;
        font-weight: 400;line-height: 16px;}
    .poptip-arrow span{    border-left-color: #fff;    border-width: 6px 0 6px 6px;position: absolute;
        width: 0;
        height: 0;
        border-color: rgba(255,255,255,0);    border-style: solid;
        overflow: hidden;
        top: 0;
        left: 0;    line-height: 16px;}

    .poptip-content {font-size: 12px;font-weight: 400;line-height: 16px;color:#3f66f6;}

    .login-title{margin-top: 125px;width: 100%;text-align: center;}
    .login-title span{font-size: 24px;color: #3d404d;padding-bottom: 12px;border-bottom: 3px  solid #3f66f6;}

    .login-account{margin-top: 30px;padding: 0px 40px;background: #fff;}
    /*.login-account .input-box{border-bottom: 1px solid #d1d1d1;overflow: hidden;padding: 27px 0px 27px 10px;}*/
    .login-account .input-box{border-bottom: 1px solid #d1d1d1;overflow: hidden;height:76px;position: relative;}
    .login-account .input-box img{width: 19px;height: 22px;float: left;vertical-align: middle;position: absolute;top: 27px;left: 15px;}
    .login-account .input-box input{width: 100%;height: 100%;border:none;outline: none;padding: 0;text-indent: 50px;vertical-align: middle;}
    .phone-num{font-size: 16px;color: #3d404d;}
    .pass{font-size: 16px;color: #8F95B3;}

    .qr-code-out{width: 100%;background: #fff;margin-top: 30px;padding: 30px 0px;}
    .qr-code{width: 253px;height: 253px;background: lightgrey;margin: 0 auto;}
    .qr-des{width: 100%;text-align: center;margin-top: 10px;cursor: pointer;}
    .qr-des span{color: #3f66f6;font-size: 6px;}
    .icon-refresh{width: 17px;height:15px;}

    .btn-box{padding: 0px 40px;margin-top: 76px;background: #fff;}
    .btn-box button{width: 400px; height: 68px;background: #3f66f6;font-size: 24px;color:#fff;text-align: center;line-height: 68px;outline: none;border: none;cursor: pointer;box-shadow: 1px 2px 5px #888888;}
    .register-btn{width: 100%;position: absolute;bottom: 30px;}
    .register-btn span{display: block;width: 140px;height: 38px;text-align: center;line-height: 38px; color: #3d404d;font-size: 14px;margin: 0 auto;border: 1px solid #c9cace;box-sizing: border-box;cursor: pointer;}

    .qr-lo {text-align: center;margin-top: 90px;}



    /*[v-show] { display: none; }*/
</style>

<template>

        <section class="out-box" @keyup.enter="localLogin">
            <section class="main">

                <section class="main-content">
                    <section class="content-img">
                        <section class="ct-logo">
                            <span>
                                <i class="icon iconfont" @click="routerLink"></i>
                                <!-- <img src="http://jhsy-img.caizhu.com/sass/images/ic-logo-1.png" alt="logo"> -->
                            </span>
                        </section>
                        <section class="ct-des">
                            <section class="ct-des-in">
                                <p class="ct-des-up">企业人才培养阵地</p>
                                <p class="ct-des-down">创建自由人才培养体系，构建专属于您的企业大学</p>
                            </section>

                        </section>
                    </section>
                    <section class="content-login">

                        <!-- step 0 -->
                        <section :class="step==0?'':'hide'">

                            <section class="switch-btn" @click="switchLoginType">
                                <img class="login-word" src="../../images/login-word1.png" alt="">
                                <img class="switch-btn-img" src="http://jhsy-img.caizhu.com/sass/images/icon-code.png" alt="">
                            </section>
                            <section class="login-title">
                                <span>账号登录</span>
                            </section>
                            <section >
                                <div class="login-account">
                                    <div class="input-box">
                                        <img v-if="one.editFlag == 0" src="http://jhsy-img.caizhu.com/sass/images/icon-account.png" alt="">
                                        <img v-if="one.editFlag == 1" src="http://jhsy-img.caizhu.com/sass/images/icon-account-press.png" alt="">
                                        <input class="phone-num" type="text" @input="numInput" @keyup.enter="doNext" v-model="phoneNum" ref="input" @focus="numFocus" @blur="numBlur" >
                                    </div>
                                    <div class="input-box">
                                        <img v-if="two.editFlag == 0" src="http://jhsy-img.caizhu.com/sass/images/icon-password.png" alt="">
                                        <img v-if="two.editFlag == 1" src="http://jhsy-img.caizhu.com/sass/images/icon-password-press.png" alt="">
                                        <input class="pass" type="password" @input="passInput" @keyup.enter="doLogin" v-model="pass" ref="passtxt" @focus="passFocus" @blur="passBlur">
                                    </div>
                                </div>
                            </section>
                            <section class="btn-box">
                                <button @click="localLogin">登录</button>
                            </section>
                        </section>
                        <!-- step 1 -->
                        <section :class="step==1?'':'hide'">
                            <section  class="switch-btn" @click="switchLoginType" >
                                <img class="login-word" src="../../images/login-word2.png" alt="">
                                <img class="switch-btn-img" src="http://jhsy-img.caizhu.com/sass/images/icon-computer.png" alt="">
                            </section>

                            <section class="qr-code-out">
                                <section id="qr-login" class="qr-lo"></section>
                            </section>
                        </section>
                        <!-- <section class="register-btn">
                            <span @click="goto('/register/add-phone')">企业注册</span>
                        </section> -->
                    </section>
                </section>

            </section>

            <!-- 弹窗区 -->
            <el-dialog
                title="提示"
                :visible.sync="enterpriseState"
                class="new-dialog"
                width="480px"
                :before-close="handleClose">
                <div class="cont" style="text-align:center">你的企业未开通服务，请联系公司管理员开通服务</div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="text no-border" @click="enterpriseState = false">取消</el-button>
                    <el-button type="primary"  class="shadow" @click="enterpriseState = false">确 定</el-button>
                </span>
            </el-dialog>

            <el-dialog
                title="提示"
                :visible.sync="parseonState"
                class="new-dialog"
                width="480px"
                :before-close="handleClose">
                <div class="cont" style="text-align:center">你没有登录权限，请联系公司管理员</div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="text no-border" @click="parseonState = false">取消</el-button>
                    <el-button type="primary"  class="shadow" @click="parseonState = false">确 定</el-button>
                </span>
            </el-dialog>


        </section>
</template>

<script>

	import com from 'js/common'
	import qs from 'qs'
    // import wx from 'js/jweixin'

	var qrBoxDom;
	var wxLoginJs = location.protocol +'//rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js',
        authInfo = {};
	function wxLoginJsFn(){
		var obj = new WwLogin({
			id:"qr-login",
			appid: authInfo.AppID,
			scope: "snsapi_base",
            agentid :authInfo.agentid,
			redirect_uri: encodeURIComponent(location.protocol+'//'+location.host+location.pathname),
			state: authInfo.State,
			style: "black",
			href: ""
		})

        console.log(location.protocol+'//'+location.host+location.pathname)
	}

	function wxLogin(opts){
		com.createJs(wxLoginJs, wxLoginJsFn)
	}

	export default{
		data: function(){
			return {
                parseonState:false,
                enterpriseState:false,
				step: 1,  //  0 账号密码登录，1 二维码登录

                one:{
					editFlag: 0,  // 0  未编辑，1 编辑
                },
                two:{
					editFlag: 0,  // 0  未编辑，1 编辑
                },

				phoneNum: '',  //  手机号
                pass: '',  //  密码

                hasAjaxAuthCode: false      // 是否已经开始获取授权请求
            }
		},
		mixins: [mixinMethods],
		methods: {

			initData(){

                if(this.phoneNum == undefined){
                    this.one.editFlag = 0;
                    this.two.editFlag = 0;
                }else if(this.phoneNum == ''){
                    this.one.editFlag = 0;
                    this.two.editFlag = 0;
                }else{
                    this.one.editFlag = 1;
                    this.two.editFlag = 1;
                }

            },
			switchLoginType(){
				if(!this.hasAjaxAuthCode){
					this.hasAjaxAuthCode = true;
                }
				this.step = !this.step;
            },
			numInput(){
				this.one.editFlag = 1;

            },
			numFocus(){
				this.one.editFlag = 1;
            },
			passFocus(){
				this.two.editFlag = 1;
            },
			numBlur(){
				if(this.phoneNum){
					this.one.editFlag = 1;
                }else{
					this.one.editFlag = 0;
                }
            },
			passBlur(){
				if(this.pass){
					this.two.editFlag = 1;
				}else{
					this.two.editFlag = 0;
				}
            },

			doNext(){
				this.$refs['passtxt'].focus();
				this.two.editFlag = 1;
            },
			passInput(){
				this.two.editFlag = 1;
				let value = this.pass;
			},


			doLogin(){//  enter 自动登录

            },
			toRefresh(){//  刷新二维码

            },

            // same - add
			localLogin: function(){
				axios.post('/com/member/accountLogin',qs.stringify({
					mobile: this.phoneNum,
                    password: this.pass
                })).then( (res)=>{
                    var d = res.data;
                    if(d.flag == 1){
	                    location.assign('/');
                    }else{
                    	this.$message.error(d.msg);
                    }
                })
            },

			getAuthInfo: function(cbCode){   // 微信登录获取信息
                axios.post('/com/member/getLoginConfig', qs.stringify({'type':3})).then( (res)=>{
                	var d = res.data;
                	if(d.flag == 1){
		                authInfo = d.data;
                        console.log(authInfo)
		                if(cbCode){
		                	this.codeFN(cbCode);
                        }else{
		                    wxLogin();
		                }
                    }
                } );
            },
			codeFN(cbCode){
				if(cbCode){
					axios.post('com/member/wxLoginCall', qs.stringify({
						code: cbCode,
						state: authInfo.State
					})).then( r=>{

					var d = r.data;
					if(d.flag == 1){
						if(d.data.StepSign == "fillPhone"){
							location.assign('/register/bind-phone');
                        }else if(d.data.StepSign == "loginSuccess"){
							location.assign('/');
                        }
					}else{
						this.$message.error(d.msg);
                    }

				})
				}
			},

            routerLink() {
                this.$router.push('/register/introduce')
            }

		},
		mounted: function(){
            // wx.config({
            //     beta: true,
            //     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            //     appId: 'wwe64124feb891dc0e', // 必填，企业微信的corpID
            //     timestamp:'', // 必填，生成签名的时间戳
            //     nonceStr: '', // 必填，生成签名的随机串
            //     signature: '',// 必填，签名，见附录1
            //     jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            // })

			this.$refs['input'].focus();
			this.initData();

			/*  */
			var urlParams = this.$route.query,
                cbCode = urlParams.code,
                cbState = urlParams.state;

            this.getAuthInfo(cbCode);
		},
		directives: {
			focus: {
				inserted: function (el, {value}) {
					if (value) {
						el.focus();
					}
				}
			}
		},
	}


</script>
